import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
import 'rc-tabs/assets/index.css';
import { isEqual, isEmpty } from 'lodash';
import './Tabstyle_15.css';

//便利贴3
export default class Tabstyle_15 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tabid: this.props.tabid
        }
        this.handleTabData = this.handleTabData.bind(this);
    }

    handleTabData(tabid){
        const { datas={} } = this.props;
        const { handleTabData={} } = datas;
        handleTabData(tabid);
        this.setState({
            tabid: tabid
        })
    }

    componentWillReceiveProps(nextProps){
        const { tabid } = this.state;
        if(!isEqual(tabid, nextProps.datas.currentTab)){
            this.setState({
                tabid: nextProps.datas.currentTab
            })
        }
    }

   
    
    render(){     
        const { datas={}, fontStyle, ebaseid = '' } = this.props;
        const { tabid } = this.state;
        const { isShowSettingShowType='0' } = datas;
        if(isEmpty(datas)) return <div/>;
        const { currentTab='1', tabids = [], titles = [], methodvalue,tabwidth,counts } = datas;
        let titleStyle = {width: '100%'};
        let tHtml_new = (
            <div className='commonTab Tabstyle_15'>
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@sy1s3k`}
                activeKey={tabid}
                renderTabBar={()=><ScrollableInkTabBar ecId={`${this && this.props && this.props.ecId || ''}_ScrollableInkTabBar@snj62h`} />}
                renderTabContent={()=><TabContent ecId={`${this && this.props && this.props.ecId || ''}_TabContent@35ffmc`} />}
                className="tabcontainer tab2"
                style={titleStyle}
                >
                {
                    titles.map((title, i)=> {
                        if ((ebaseid == '8') && counts && counts[i] !== -1 && counts[i] !== '' && counts[i] !== null) {
                            if(counts[i] > 99){
                                title +='(99+)';
                            }else {
                                title +=' (' + counts[i] + ')';
                            }
                        }else if (ebaseid == 'blogStatus' && counts && '0'!== counts[i]) {
                            title += ' (' + counts[i] + ')';
                        }else if(ebaseid == '7_DY'&& counts && '0'!== counts[i]){
                            title += ' (' + counts[i].noReadNum + ')';
                        }else if(isShowSettingShowType == '1' && ebaseid == '7'&& counts && counts[i] && counts[i].noReadNum){
                            title += ' (' + counts[i].noReadNum + ')';
                        }else if(ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1'){
                            title =  title;
                        }
                        let selcolor='';
                        let cbstyle = {color:'white',marginLeft: '12px', marginRight: '12px',height:'100%'};
                        let cbstyle1 =tabids[i] == tabid?{color:'white',width: '148px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', display: 'block',padding:'0px 12px'} : {color:'white',width: tabwidth + 'px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', display: 'block',padding:'0px 12px',height:'100%'};

                        if(i%6==0){selcolor='#739DF3'}else if(i%6==1){selcolor='#A494F1'}else if(i%6==2){selcolor='#4CC5D2'}else if(i%6==3){selcolor='#FFB277'}else if(i%6==4){selcolor='#F57575'}else if(i%6==5){selcolor='#86CA71'}
                        const cbtdStyle=tabids[i] == tabid?{width: 'calc( 100% )', verticalAlign: 'top',backgroundSize: '100% 100%', height: '58px',lineHeight:'58px',  paddingTop: '0px', borderBottomColor: selcolor, backgroundImage: 'url()',padding:'0px 5px 0 5px',margin:'3px 0px',
                        borderRadius:'10px 10px 10px 0px',background:selcolor,boxShadow:'0px 0px 10px #909090','-moz-box-shadow': '0px 0px 10px #909090','-webkit-box-shadow': '0px 0px 10px #909090','filter':'progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4)'}
                        :{width: 'auto', verticalAlign: 'top',backgroundSize: '100% 100%', height: '42px', lineHeight:'42px',  marginTop: '10px', borderBottomColor: 'white', backgroundImage: 'url()'};
                        const cbtdStyle1=tabids[i] == tabid?{width: 'calc( 100% )', verticalAlign: 'top',backgroundSize: '100% 100%', height: '58px', lineHeight:'58px',  paddingTop: '0px', borderBottomColor: selcolor, backgroundImage: 'url()',padding:'0px 5px 0 5px',margin:'3px 0px',
                        borderRadius:'10px 10px 10px 0px',background:selcolor,boxShadow:'0px 0px 10px #909090','-moz-box-shadow': '0px 0px 10px #909090','-webkit-box-shadow': '0px 0px 10px #909090','filter':'progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4)'}
                        :{width: 'auto',  verticalAlign: 'top',backgroundSize: '100% 100%', height: '42px', lineHeight:'42px', marginTop: '10px', borderBottomColor: 'white', backgroundImage: 'url()'};
                        const className = tabids[i] == tabid ? `tab2selected wea-f${fontStyle.tab1fontsize || 12} ` : `tab2unselected wea-f${fontStyle.tab2fontsize || 12}`;
                        const pointClassName = ebaseid == '7'&& counts && counts[i] && counts[i].isHaveNoRead && counts[i].isHaveNoRead == '1' ? 'portal-new-unreadpoint' : '';
                        let tabTextStyle=pointClassName==''?{display:'inline-block',width:'100%',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}:{display:'inline-block',width:'calc(100% - 10px)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}
                    return  <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@443lrp@${tabids[i]}`} key={tabids[i]} style={{width: 'auto'}} tab={
                                    <div    title={title} 
                                            className={className} 
                                            style={methodvalue == '2' ? cbtdStyle1 : cbtdStyle} data-tabid={tabids[i]}  
                                            onClick={() => this.handleTabData(tabids[i])}
                                    >
                                        <div className={`tabcolor-${i%6} colorbartitle tabtitile`}>
                                            <div style={methodvalue == '2' ? cbstyle:cbstyle1} className='skewtext'>
                                                <div style={tabTextStyle}>{title}</div>
                                                <div className={pointClassName}></div>
                                            </div>
                                        </div>
                                    </div>
                                }>
                                </TabPane>
                    })
                }
            </Tabs>
            </div>
        )
        return tHtml_new;
    }
}